<!--
 * @Descripttion: ''
 * @Author: lilong(lilong@hztianque.com)
 * @Date: 2020-07-08 19:58:06
 * @LastEditTime: 2020-07-14 20:03:36
--> 
<template>
  <div class='chart-container' ref='bar3' />
</template>
<script>
import _lodash_last from 'lodash/last'
import _lodash_isArray from 'lodash/isArray'
import _lodash_isObject from 'lodash/isObject'
export default {
  props: {
    chartId: {
      type: String,
      default: () => 'pictorailBar1',
    },
    pictorailUrl: {
      type: String,
      default: () => 'image://',
    },
    source: {
      type: [Array, Object],
      default: () => {
        return {
          '区域1': 100,
          '区域2': 189,
          '区域3': 79,
          '区域4': 90,
          '区域5': 120,
          '区域6': 10,
        }
      },
    },
  },
  data() {
    return {
      chart: null,
      option:{}
    }
  },
  watch: {
    source(newVal) {
      if (this.chart === null) {
        this.initChart()
      }
      this.updateChart(newVal)
    },
  },
  mounted() {
    this.chart = this.initChart()
    this.updateChart(this.source)
  },
  methods: {
    initChart() {
      const el = this.$refs.bar3
      const _chart = this.$echarts.init(el)
      return _chart
    },
    initData(source) {
      let _maxVal = 0
      const _seriesData = []
      const _yAxisData = []
      if (_lodash_isArray(source)) {
        source.forEach(item => {
          _seriesData.push(item.value)
          _yAxisData.push(item.name)
        });
        _maxVal = _lodash_last(_seriesData.slice().sort((a, b) => a - b))
      } else if (_lodash_isObject(source)) {
        Object.entries(source).forEach(([key, value]) => {
          _seriesData.push(value)
          _yAxisData.push(key)
        })
        _maxVal = _lodash_last(_seriesData.slice().sort((a, b) => a - b))
      }
      return {
        max: _maxVal * 1.2,
        yAxisData: _yAxisData,
        seriesData: _seriesData,
      }
    },
    updateChart(source) {
      const _this = this
      const data = this.initData(source)
      this.option={
        tooltip: {
          trigger: 'item',
          formatter: '{b0}: {c0}',
        },
        grid: {
          left: '5%',
          bottom: '5%',
          top: '5%',
          right: '15%',
          containLabel: true,
        },
        xAxis: {
          max: data.max,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#00deff',
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: data.yAxisData,
        },
        series: [{
          // current data
          type: 'pictorialBar',
          symbol: _this.pictorailUrl,
          symbolRepeat: 'fixed',
          symbolMargin: '5%',
          symbolClip: true,
          stack:20,
          symbolSize: 20,
          symbolBoundingData: data.max,
          data: data.seriesData,
          z: 10,
        }, {
          // full data
          type: 'pictorialBar',
          itemStyle: {
            normal: {
              // bg bar opacity
              opacity: .2,
            },
          },
          label: {
            normal: {
              show: true,
              formatter: (params) => {
                return `${(params.value / data.max * 100).toFixed(1)} %`
              },
              position: 'right',
              offset: [10, 0],
              textStyle: {
                color: '#00deff',
              },
            },
          },
          animationDuration: 2000,
          symbolRepeat: 'fixed',
          symbolMargin: '5%',
          symbol: _this.pictorailUrl,
          symbolSize: 20,
          symbolBoundingData: data.max,
          data: data.seriesData,
          z: 5,
        }],
      }
      this.chart.setOption(this.option)
    },
  },
}
</script>
<style lang="scss" scoped>
.chart-container{
  width: 100%;
  height: 100%;
}
</style>

